---
# title: Installation
# description: Learn how to get Tailwind CSS up and running in your project.
title: 安装
description: 学习如何在您的工程中使用 Tailwind CSS
---

import { Heading } from '@/components/Heading'
import { List, ListItemBad } from '@/components/List'
import { IntegrationGuides } from '@/components/IntegrationGuides'
import Link from 'next/link'
import stats from '@/utils/stats'



<!-- ## Integration guides -->
## 集成指南

<!-- Installing Tailwind CSS can be a slightly different process depending on what other frameworks/tools you're using, so we've put together a bunch of guides that cover popular setups. -->
对于不同的框架/工具，安装 Tailwind CSS 是完全不同的过程，所以我们整理了一份常见安装的指南集合。
<IntegrationGuides/>

<!-- Don't see your favorite tool in the list? We're always working on new guides, but in the mean time you can follow the instructions for [installing Tailwind CSS as a PostCSS plugin](#installing-tailwind-css-as-a-post-css-plugin) instead to get set up in no time. -->
没有在列表中看到您的工具？我们一直在扩充新的指南，同时您也可以按照 [以 PostCSS 插件的形式安装 Tailwind CSS ](#post-css-tailwind-css) 的文档来安装。

---


<!-- ## Installing Tailwind CSS as a PostCSS plugin -->
## 以 PostCSS 插件的形式安装 Tailwind CSS

<!-- For most real-world projects, we recommend installing Tailwind as a PostCSS plugin. Most modern frameworks use PostCSS under the hood already, and there's a good chance you've used or are currently using other PostCSS plugins like [autoprefixer](https://github.com/postcss/autoprefixer). -->
对于大多数现实中的工程，我们建议作为一个 PostCSS 插件来安装 Tailwind。大多数的现代框架基本都默认使用了 PostCSS，您很可能已经使用或当前正在使用其它 PostCSS 插件，例如 [autoprefixer](https://github.com/postcss/autoprefixer).

<!-- If you've never heard of PostCSS or are wondering how it's different from tools like Sass, read our guide on [using PostCSS as your preprocessor](/docs/using-with-preprocessors#using-post-css-as-your-preprocessor) for an introduction. -->
如果您从没有听说过 PostCSS，或者很想知道它与其它工具，如 Sass 的区别，请阅读我们的指南：[将 PostCSS 用作预处理器](/docs/using-with-preprocessors#using-post-css-as-your-preprocessor)。

<!-- If this is a bit over your head and you'd like to try Tailwind without configuring PostCSS, read our instructions on [using Tailwind without PostCSS](#using-tailwind-without-post-css) instead. -->
如果您觉得这有些麻烦，并且想在不配置 PostCSS 的情况下尝试使用 Tailwind，请阅读有关在 [不依赖 PostCSS 使用 Tailwind ](#post-css-tailwind-1)的说明。

<!-- ### Install Tailwind via npm -->
### 通过 npm 安装 Tailwind

<!-- For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind and its peer-dependencies via npm. -->
对于大多数项目（并利用 Tailwind 的自定义功能），您需要通过 npm 安装 Tailwind 及其依赖项。

```shell
npm install tailwindcss@latest postcss@latest autoprefixer@latest
```

<!-- Since Tailwind [does not automatically add vendor prefixes](/docs/browser-support#vendor-prefixes) to the CSS it generates, we recommend installing [autoprefixer](https://github.com/postcss/autoprefixer) to handle this for you like we've shown in the snippet above. -->
由于 Tailwind [不会自动添加浏览器引擎前缀](/docs/browser-support#vendor-prefixes)到生成的 CSS 中，我们建议您安装[ autoprefixer ](https://github.com/postcss/autoprefixer)  去处理这个问题，就像上面的代码片段所展示的那样。

<!-- If you're integrating Tailwind with a tool that relies on an older version of PostCSS, you may see an error like this: -->
如果您将 Tailwind 与依赖于旧版本 PostCSS 的工具集成在一起，则可能会看到如下错误：

```shell
Error: PostCSS plugin tailwindcss requires PostCSS 8.
```

<!-- In this case, you should [install the PostCSS 7 compatibility build](#post-css-7-compatibility-build) instead. -->
在这种情况下，您应该安装[ PostCSS 7 兼容性版本](#post-css-7)。

<!-- ### Add Tailwind as a PostCSS plugin -->
### 作为 PostCSS 插件来添加 Tailwind

<!-- Add `tailwindcss` and `autoprefixer` to your PostCSS configuration. Most of the time this is a `postcss.config.js` file at the root of your project, but it could also be a `.postcssrc` file, or `postcss` key in your `package.json` file. -->
将 `tailwindcss` 和 `autoprefixer` 添加到您的 PostCSS 配置中。 多数情况下，这是项目根目录下的 `postcss.config.js` 文件，但也可能是 `.postcssrc` 文件或是由 package.json 文件中的 `postcss` 键所指定。

```js
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

<!-- If you aren't sure where PostCSS plugins are configured for the tools you're using, you'll want to refer to the documentation for those tools to learn where this should go. A search for "configure postcss {my tool}" will get you the answer pretty fast, too. -->
如果您不太清楚如何在您正在使用的工具如何配置 PostCSS，则需要参考一下这些工具的文档。搜索 ”configure postcss {我的工具名字}” 也将很快为您提供答案。

<!-- If you're using any other PostCSS plugins, you should read our documentation on [using PostCSS as your preprocessor](/docs/using-with-preprocessors) for more details about the best way to order them with Tailwind. -->
如果您使用的是其他 PostCSS 插件，则应阅读有关[将 PostCSS 用作预处理器](/docs/using-with-preprocessors)的文档，以获取有关与 Tailwind 集成在一起的最佳实践的详细信息。

<!-- ### Create your configuration file -->
### 创建您的配置文件

<!-- If you'd like to customize your Tailwind installation, generate a config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package: -->
如果您想要自定义您的 Tailwind 安装，可以使用 Tailwind CLI 工具生成一份配置文件，这个命令行工具已包含在了 `tailwindcss` 这个 npm 包里了。

```shell
npx tailwindcss init
```

<!-- This will create a minimal `tailwind.config.js` file at the root of your project: -->
这将会在您的工程根目录创建一个最小的 `tailwind.config.js` 文件。

```js
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

<!-- Learn more about configuring Tailwind in the [configuration documentation](/docs/configuration). -->
在[配置文档](/docs/configuration)中了解有关配置 Tailwind 的更多信息。

<!-- ### Include Tailwind in your CSS -->
### 包含 Tailwind 到您的 CSS 中

<!-- Create a CSS file if you don't already have one, and use the `@tailwind` directive to inject Tailwind's `base`, `components`, and `utilities` styles: -->
如果您尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：

```css
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

<!-- Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system. -->
Tailwind 将在构建时将这些指令替换为基于您配置的设计系统生成的所有样式。

<!-- If you're using `postcss-import` (or a tool that uses it under the hood, such as [Webpacker](https://github.com/rails/webpacker) for Rails), use our imports instead of the `@tailwind` directive to avoid issues when importing any of your own additional files: -->
如果您使用的是  `postcss-import`（或背后使用它的工具，例如 [Webpacker](https://github.com/rails/webpacker) for Rails），请使用我们的导入而不是 `@tailwind` 指令来避免在导入任何其他文件时出现问题：

```css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

<!-- If you're working in a JavaScript framework like React or Vue that supports directly importing CSS files into your JS, you can also skip creating a CSS file altogether and import `tailwindcss/tailwind.css` instead which has all of these directives already in place: -->
如果您使用的是像 React 或 Vue 这样的 JavaScript 框架，支持直接将 CSS 文件导入到 JS 中，那么您也可以完全跳过创建 CSS 文件，而直接导入 tailwindcss / tailwind.css，而后者已经安装了所有这些指令：

```js
// app.js
import "tailwindcss/tailwind.css"
```

<!-- ### Building your CSS -->
### 生成您的 CSS

<!-- How you actually build your project will depend on the tools that you're using. Your framework may include a command like `npm run dev` to start a development server that compiles your CSS in the background, you may be running `webpack` yourself, or maybe you're using `postcss-cli` and running a command like `postcss styles.css -o compiled.css`.

If you're already familiar with PostCSS you probably know what you need to do, if not refer to the documentation for the tool you are using.

When building for production, be sure to configure the `purge` option to remove any unused classes for the smallest file size: -->
实际构建项目的方式将取决于您使用的工具。 您的框架可能包含诸如 `npm run dev` 之类的命令，以启动在后台编译 CSS 的开发服务器，您可能自己在运行 `webpack`，或者您正在使用 `postcss-cli` 并运行诸如 `postcss styles.css -o compiled.css` 之类的命令。

如果您已经熟悉 PostCSS，则可能知道您需要做什么，如果不熟悉，请参考所用工具的文档。

为生产而构建时，请确保配置清除 (purge) 选项以删除任何未使用类，这样生成的文件尺寸最小：

```diff-js
  // tailwind.config.js
  module.exports = {
+   purge: [
+     './src/**/*.html',
+     './src/**/*.js',
+   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }
```

<!-- Read our separate guide on [optimizing for production](/docs/optimizing-for-production) to learn more about tree-shaking unused styles for best performance.

If you're integrating Tailwind with a tool that relies on an older version of PostCSS, you may see an error like this when trying to build your CSS: -->
阅读我们有关[优化生产](/docs/optimizing-for-production)的单独指南，以了解有关 tree-shaking 优化未使用样式以获得最佳性能的更多信息。

如果您将 Tailwind 与依赖于较旧版本 PostCSS 的工具集成在一起，则在尝试构建 CSS 时可能会看到如下错误：

```shell
Error: PostCSS plugin tailwindcss requires PostCSS 8.
```

<!-- In this case, you should [switch to our PostCSS 7 compatibility build](#post-css-7-compatibility-build) instead. -->
在这种情况下，您应该切换到我们的[ PostCSS 7 兼容性版本](#post-css-7)。

---

<!-- ## Using Tailwind without PostCSS -->
## 不依赖 PostCSS 使用 Tailwind

<!-- For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to generate your CSS without configuring PostCSS or even installing Tailwind as a dependency if you don't want to.

Use `npx` which is a tool that is automatically installed alongside `npm` to generate a fully compiled Tailwind CSS file: -->
对于简单的项目或只是体验一下 Tailwind，您可以使用 Tailwind CLI 工具生成 CSS，而无需配置 PostCSS 或甚至不需要安装 Tailwind 作为依赖项。

使用 `npx` 这个工具，它会与 `npm` 一起自动安装，以生成完全编译的 Tailwind CSS 文件：

```shell
npx tailwindcss-cli@latest build -o tailwind.css
```

<!-- This will create a file called `tailwind.css` generated based on Tailwind's [default configuration](https://unpkg.com/browse/tailwindcss@^2/stubs/defaultConfig.stub.js), and automatically add any necessary vendor prefixes using [autoprefixer](https://github.com/postcss/autoprefixer).

Now you can pull this file into your HTML just like any other stylesheet: -->
这将创建一个基于 Tailwind 的[默认配置](https://unpkg.com/browse/tailwindcss@^2/stubs/defaultConfig.stub.js)生成的名为 `tailwind.css` 的文件，并使用 [autoprefixer](https://github.com/postcss/autoprefixer) 自动添加任何必需的浏览器前缀。

现在，您可以像其他样式表一样将此文件引入到 HTML 中：

```html
<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>
```

<!-- ### Using a custom CSS file -->
### 使用自定义 CSS 文件

<!-- If you'd like to process any custom CSS alongside the default styles Tailwind generates, create a CSS file wherever you normally would and use the `@tailwind` directive to include Tailwind's `base`, `components`, and `utilities` styles: -->
如果您想基于 Tailwind 生成的默认样式自定义任何 CSS ，通常情况下只需创建一个 CSS 文件，并使用 `@tailwind` 指令包含 Tailwind 的 `base`，`components` 和 `utilities` 样式：

```css
/* ./src/tailwind.css */
@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

@tailwind utilities;
```

<!-- Then include the path to that file when building your CSS with `npx tailwindcss build`: -->
然后使用 `npx tailwindcss build` 构建 CSS 时，指定该文件的路径：

```shell
npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css
```

<!-- Read about [adding base styles](/docs/adding-base-styles), [extracting components](/docs/extracting-components), and [adding new utilities](/docs/adding-new-utilities) to learn more about adding custom CSS on top of Tailwind. -->
阅读有关[添加基本样式](/docs/adding-base-styles)，[提取组件](/docs/extracting-components)以及[添加新的功能类](/docs/adding-new-utilities)的文档，以了解有关在 Tailwind  基础上添加自定义 CSS 的更多信息。

<!-- ### Customizing your configuration -->
### 自定义您的配置

<!-- If you'd like to customize what Tailwind generates, create a `tailwind.config.js` file using the Tailwind CLI tool: -->
如果您想自定义 Tailwind 生成的内容，请使用 Tailwind CLI 工具创建一个 `tailwind.config.js` 文件：

```shell
npx tailwindcss-cli@latest init
```

<!-- This will create a minimal `tailwind.config.js` file at the root of your project: -->
这将会在您工程的根目录生成一个最小版本的 `tailwind.config.js` 文件。

```js
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

<!-- This file will automatically be read when building your CSS with `npx tailwindcss build`: -->
这个文件会在使用 `npx tailwindcss build` 命令生成您的 CSS 文件时被自动读取：

```shell
npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css
```

<!-- If you'd like to keep your config file in a different location or give it a different name, pass the config file path using the `-c` option when building your CSS: -->
如果您想将配置文件保存在其他位置或使用其他名称，请在构建 CSS 时使用 `-c` 选项传递配置文件路径：

```shell
npx tailwindcss-cli@latest build ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css
```

<!-- Learn more about configuring Tailwind in the [configuration documentation](/docs/configuration). -->
了解更多[配置 Tailwind 文档](/docs/configuration)。

<!-- ### Building for production -->
### 为生产而构建

<!-- When building for production, set `NODE_ENV=production` on the command line when building your CSS: -->
为生产而构建时，在生成 CSS 时在命令行上设置 `NODE_ENV = production`：

```shell
NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css
```

<!-- This will make sure Tailwind removes any unused CSS and minifies the CSS file for best performance. Read our separate guide on [optimizing for production](/docs/optimizing-for-production) to learn more. -->

这将确保 Tailwind 删除所有未使用的 CSS 并最小化 CSS 文件以获得最佳性能。 阅读我们有关[优化生产](/docs/optimizing-for-production)的单独指南，以了解更多信息。

---

<!-- ## Using Tailwind via CDN -->
## 通过 CDN 来使用 Tailwind

<!-- Before using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process. -->
在使用 CDN 之前，请注意，如果没有将 Tailwind 集成到您的构建过程中，那么许多使 Tailwind CSS 强大的功能将不可用。

<!-- <List>
  <ListItemBad>You can't customize Tailwind's default theme</ListItemBad>
  <ListItemBad>You can't use any <a href="/docs/functions-and-directives">directives</a> like <code>@apply</code>, <code>@variants</code>, etc.</ListItemBad>
  <ListItemBad>You can't enable additional variants like <a href="/docs/hover-focus-and-other-states#group-focus"><code>group-focus</code></a></ListItemBad>
  <ListItemBad>You can't install third-party plugins</ListItemBad>
  <ListItemBad>You can't tree-shake unused styles</ListItemBad>
</List> -->
<List>
  <ListItemBad>您无法自定义 Tailwind 默认主题</ListItemBad>
  <ListItemBad>您不能使用任何 <a href="/docs/functions-and-directives">指令，</a> 如： <code>@apply</code>， <code>@variants</code> 等等</ListItemBad>
  <ListItemBad>您无法启用更多的变体，如： <a href="/docs/hover-focus-and-other-states#group-focus"><code>group-focus</code></a></ListItemBad>
  <ListItemBad>您无法下载第三方的插件</ListItemBad>
  <ListItemBad>您无法 tree-shake 未使用到的 Styles</ListItemBad>
</List>

<!-- To get the most out of Tailwind, you really should [install it as a PostCSS plugin](#installing-tailwind-as-a-post-css-plugin). -->

<!-- To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN: -->

想要充分利用 Tailwind，您应该[作为 PostCSS 插件安装 Tailwind](#post-css-tailwind-css)。

想要使用 Tailwind 进行快速演示，或者只是试一下框架，请通过 CDN 获取最新的默认配置：

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```

<!--<p>
  Note that while the CDN build is large <em>({stats.default.brotlified} compressed, {stats.default.minified} raw)</em>, <strong>it's not representative of the sizes you see when including Tailwind as part of your build process</strong>.
</p>-->
<p>
  请注意因为 CDN 文件很大 <em>({stats.default.brotlified} compressed, {stats.default.minified} raw)</em>, <strong>它并不代表您将 Tailwind 作为构建过程的一部分时生成的文件尺寸也是这么大</strong>.
</p>

<!-- Sites that follow our [best practices](/docs/optimizing-for-production) are almost always under 10kb compressed. -->
遵循我们[最佳实践](/docs/optimizing-for-production)的网站几乎总是压缩在10kb以下。

---

<!-- ## HTML starter template -->
## HTML 启动模板

<!-- For Tailwind's styles to work as expected, you'll want to use the HTML5 doctype and include the responsive viewport meta tag to properly handle responsive styles on all devices. -->
为了使 Tailwind 的样式能够按预期工作，您将需要使用 HTML5 文档类型并包括响应式视口元标记以正确处理所有设备上的响应式样式。

```html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/path/to/tailwind.css" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>
```

<!-- Many front-end frameworks like Next.js, vue-cli and others do all this for you behind the scenes automatically, so depending on what you're building you might not need to set this up. -->
许多前端框架（如 Next.js，vue-cli 等）会在后台自动为您完成所有这些操作，因此，根据您要构建的内容，可能不需要进行设置。

---

<!-- ## PostCSS 7 compatibility build -->
## PostCSS 7 兼容性版本

<!-- As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven't updated yet, which means you might see an error like this in your terminal after installing Tailwind and trying to compile your CSS: -->

从 v2.0 版本开始，Tailwind CSS 依赖于 PostCSS 8。由于 PostCSS 8 才使用了几个月，因此生态系统中的许多其他工具尚未更新，这意味着在安装 Tailwind，并尝试编译 CSS 时，您可能会在终端中看到这样的错误：


```shell
Error: PostCSS plugin tailwindcss requires PostCSS 8.
```

<!-- To help bridge the gap until everyone has updated, we also publish a PostCSS 7 compatibility build under the `compat` channel on npm.

If you run into the error mentioned above, uninstall Tailwind and re-install using the compatibility build instead: -->

为了弥合这个问题，直到每个人都进行了更新，我们还在 npm 的 `compat` 频道下发布了 PostCSS 7 兼容性版本。

如果遇到上述错误，请卸载 Tailwind 并使用兼容性版本重新安装：

```shell
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

<!-- The compatibility build is identical to the main build in every way, so you aren't missing out on any features or anything like that.

Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the `latest` tag: -->

兼容性版本在任何方面都与主版本相同，因此您不会错过任何功能或类似功能。

一旦您的其余工具添加了对 PostCSS 8 的支持，就可以通过使用 `latest` 标签重新安装 Tailwind 及其相关依赖项来取代兼容性构建：

```shell
npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest
```
